<template>
	<view style="width: 0;height: 0;">
		<video id="previewVideo"
			class="preview-video"
			:autoplay="autoplay"
			:src="src | media"
			@fullscreenchange="fullScreenChange">
		</video>
	</view>
</template>

<script>
	export default {
		props: {
			autoplay: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				fullScreen: false,
				src: ''
			};
		},
		methods: {
			previewVideo(src) {
				this.src = src;
				this.$nextTick(() => {
					let context = uni.createVideoContext('previewVideo', this);
					context.requestFullScreen({ direction: 0 });
					context.seek(0);
					context.play();
				});
			},
			fullScreenChange(e) {
				if(e.detail.fullScreen){
					this.fullScreen = true;
				}else{
					this.fullScreen = false;
					let context = uni.createVideoContext('previewVideo', this);
					context.pause();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
.preview-video{
	width: 0px;
	height: 0px;
}
</style>
